<template>
  <ItemInfo title="地址管理" edit @edit="isshow = true">
    <Address
      :isshow="isshow"
      @close="isshow = false"
      :list="addresslist"
      @updata="updata"
    />
    <template v-if="list && list.length > 0">
      <div class="billingItem" v-for="item in list" :key="item.id">
        <div>
          <span>收件人：</span>
          <p>{{ item.name }}</p>
        </div>
        <div>
          <span>电话：</span>
          <p>{{ item.phoneNumber }}</p>
        </div>
        <div>
          <span>地址：</span>
          <p>
            {{
              (item.province || '') +
                (item.city || '') +
                (item.area || '') +
                (item.detailedAddress || '')
            }}
          </p>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="tishi content">
        <span>提示：</span>
        <p>暂时没有信息</p>
      </div>
    </template>
  </ItemInfo>
</template>

<script>
import Address from './address'
import { editCustomerAddressListUpdate } from '@/api/human'
export default {
  props: ['list'],
  data() {
    return {
      isshow: false,
      addresslist: []
    }
  },
  components: {
    Address
  },
  methods: {
    // 更改客户的地址管理信息
    async updata(form) {
      if (form) {
        const data = await editCustomerAddressListUpdate(form)
        console.log(data, this.list)
      }
      this.$emit('updata')
    }
  },
  watch: {
    list(n) {
      this.addresslist = n
    }
  }
}
</script>

<style lang="less" scoped>
.billingItem {
  flex-wrap: wrap;
  > div {
    width: 25% !important;
    &:last-child {
      width: 50% !important;
    }
  }
  &:first-child {
    margin-top: 0 !important;
  }
}
</style>
